<template>
  <div>
    <h1 class="title">图书馆自习室</h1>
    <div class="seat-selector">
      <button
        v-for="(seat, index) in seatOptions"
        :key="seat.id"
        class="seat-button"
        :class="{ 'selected-seat': seatStatusList[index] == 1 }"
        @click="selectSeat(seat.id)"
      >
        {{ seat.label }}
      </button>
    </div>

    <!-- 模态框 -->
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <p v-if="error">{{ error }}</p>
        <!-- 显示错误消息 -->
        <p v-else>座位已选中！</p>
        <!-- 显示成功消息 -->
        <button @click="closeModal">关闭</button>
      </div>
    </div>

    <!-- 时间段选择的模态框 -->
    <div class="time-slot-modal" v-if="showTimeSlotModal">
      <div class="modal-content">
        <h2>选择时间段</h2>
        <div class="seat-buttons">
          <button
            v-for="timeSlot in timeSlots"
            :key="timeSlot.id"
            class="time-slot-button"
            :class="{ 'selected-time-slot': selectedTimeSlot === timeSlot.id }"
            @click="selectTimeSlot(timeSlot.id)"
          >
            {{ timeSlot.label }}
          </button>
        </div>
        <button @click="confirmTimeSlot" :disabled="selectedTimeSlot === null">
          确认
        </button>
        <button @click="cancelTimeSlot">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
// import { ref } from 'vue';
import { ref, onMounted } from "vue";

export default {
  name: "RanklistIndexView",
  setup() {
    let seatId = ref();
    let error = ref(""); // 添加一个用于保存错误信息的变量
    let seatIdStatus = ref(); // 新增一个变量来存储座位状态
    let seatStatusList = ref([]); // 存储座位状态的整数列表
    let selectTSlot = ref(""); // 获取的时间段值，用于传给后端

    const seatstatus = () => {
      error.value = ""; // 在请求之前清除之前的错误信息
      const seatIdValue = seatId.value; // 使用10作为基数  //改  //没用

      $.ajax({
        url: "http://127.0.0.1:3000/user/account/seatstatus/",
        type: "post",

        data: {
          seatId: seatIdValue,
          selectedTimeSlot: selectTSlot.value,
        },

        success(resp) {
          if (resp.error_message === "座位状态更新成功") {
            console.log("座位状态保存成功", resp.data);
          } else {
            // 处理错误
            console.error("座位状态保存失败1", resp.error_message);
            error = resp.error_message; // 将错误信息保存到error变量中
          }
        },
        error(xhr, status, error) {
          console.error("座位状态保存失败2", error);
          error = "座位状态保存失败2"; // 处理请求失败的情况，例如显示错误消息
        },
      });
    };

    //获取座位status列表
    const getSeatId = () => {
      $.ajax({
        url: "http://127.0.0.1:3000/user/account/getseatstatus/",
        type: "GET", // 使用 GET 请求
        dataType: "json", // 声明数据类型为 JSON
        success: function (data) {
          seatStatusList.value = data;
        },
        error: function (xhr, status, error) {
          console.error("获取Getseatid失败");
          console.error("发生错误:", error);
        },
      });
    };

    onMounted(() => {
      getSeatId(); // 在组件挂载后立即调用getSeatId
    });

    getSeatId();
    // console.log("seatStatus:",seatStatusList)

    //获取当前登录的用户名
    const getCurrentUser = () => {
      $.ajax({
        url: "http://127.0.0.1:3000/user/account/currentUser", // 后端提供的获取当前登录用户信息的接口
        type: "GET",
        dataType: "json",
        success: function (data) {
          // 在这里处理获取到的用户信息
          console.log("当前登录用户信息：", data.username);
        },
        error: function (xhr, status, error) {
          console.error("获取当前登录用户信息失败", error);
        },
      });
    };

    // 在需要获取当前用户信息的地方调用这个函数
    getCurrentUser();

    return {
      seatStatusList: seatStatusList, // 存储座位状态的整数列表
      seatId,
      seatstatus,
      error, // 将error变量暴露出去以在模板中显示错误信息
      getSeatId,
      seatIdStatus,
      selectTSlot,
    };
  },

  data() {
    return {
      timeSlots: [
        { id: 1, label: "07:00~09:00" },
        { id: 2, label: "09:10~11:10" },
        { id: 3, label: "11:20~13:20" },
        { id: 4, label: "13:30~15:30" },
        { id: 5, label: "15:40~17:40" },
        { id: 6, label: "17:50~19:50" },
        { id: 7, label: "20:00~23:00" },
      ], //设置可以选择的时间段
      selectedTimeSlot: null, //选取的时间段
      seatOptions: [],
      selectedSeat: null,
      showModal: false,
      showTimeSlotModal: true, // 控制时间段选择弹窗的显示状态
    };
  },
  created() {
    for (let row = 1; row <= 5; row++) {
      for (let col = 1; col <= 5; col++) {
        const seatNumber = (row - 1) * 5 + col;
        const status = this.seatStatusList[seatNumber - 1];
        // console.log("status", status);
        this.seatOptions.push({
          id: seatNumber,
          label: `座位${seatNumber}`,
          status: status,
          selectedTimeSlot: null, // 添加时间段属性
        });
      }
    }
  },
  methods: {
    selectSeat(seatId) {
      this.seatId = seatId; // 将所选座位的ID赋值给 seatId
      // this.seatstatus(); // 调用 seatstatus 方法以触发请求
      console.log("seatid", seatId - 1);
      console.log("status", this.seatStatusList[seatId - 1]);

      // 如果座位status为0，则弹出时间段选择框
      if (this.seatStatusList[seatId - 1] === 0) {
        this.selectedSeat = seatId;
        this.showTimeSlotModal = true;
      } else {
        this.openModal();
        this.seatstatus();
      }

      this.getSeatId();
      // this.openModal();
    },

    /******************选择时间段设置***************************/
    selectTimeSlot(timeSlotId) {
      this.selectedTimeSlot = timeSlotId;
    },
    confirmTimeSlot() {
      // 如果用户没有选择时间段，不执行确认的操作
      if (this.selectedTimeSlot !== null) {
        // 将选择的时间段记录在对应的座位按钮中
        const index = this.selectedSeat - 1;
        this.seatOptions[index].selectedTimeSlot = this.selectedTimeSlot;

        // 将selectedTimeSlot设置为选中时间段的label值
        this.selectedTimeSlot = this.timeSlots.find(
          (slot) => slot.id === this.selectedTimeSlot
        ).label;
        this.selectTSlot = this.selectedTimeSlot;
        // 调用 seatstatus 方法并将 seatId 和 selectedTimeSlot 传递给后端
        this.seatstatus(this.selectedSeat, this.selectedTimeSlot);

        this.closeTimeSlotModal();
      }
      // 刷新座位状态
      this.getSeatId();
    },
    cancelTimeSlot() {
      this.closeTimeSlotModal();
    },
    closeTimeSlotModal() {
      this.showTimeSlotModal = false;
      this.selectedSeat = null; // 清除选中座位
      this.selectedTimeSlot = null; // 清除选中时间段
    },
    /*****************************************************************/

    openModal() {
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
      this.selectedSeat = null; // 清除选中座位
    },
    //某天某个时间段内所有座位的预约情况
    getseatstatus() {
      $.ajax({
        url: "http://127.0.0.1:3000/user/account/getseatstatus/",
        type: "post",
        data: {
          selectedDateSlot: "2023-10-18",
          selectedTimeSlot: "15:40~17:40",
        },
        success(resp) {
          console.log(resp);
          let res = [
            {
              1: true,
            },
            {
              2: false,
            },
            {
              3: false,
            },
            {
              4: false,
            },
            {
              5: false,
            },
          ];
          console.log(res);
        },
      });
    },
    //预约接口
    getseatDue() {
      const that = this;
      $.ajax({
        url: "http://127.0.0.1:3000/user/account/seatDue/",
        type: "post",
        data: {
          labelId: 1,
          seatId: 1,
          selectedDateSlot: "2023-10-18",
          selectedTimeSlot: "15:40~17:40",
        },
        success(resp) {
          console.log(resp);
          let res = {
            result: "success",
            message: "预约成功",
          };
          that.getseatstatus();
          alert(res.message);
        },
      });
    },
  },
};
</script>

<style scoped>
.title {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 20%;
}

.seat-selector {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 50px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.seat-button {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  border-radius: 50%;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.seat-button:hover {
  background-color: #ccc;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  /* 确保模态框在其他元素之上 */
}

.modal-content {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  /* 添加阴影效果 */
  max-width: 400px;
  /* 控制模态框的最大宽度 */
  width: 90%;
  /* 控制模态框的宽度 */
}

/* 关闭按钮样式 */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
  color: #777;
}

.close-button:hover {
  color: #333;
}

/* 新增样式用于选中座位的按钮 */
.selected-seat {
  background-color: red;
  color: white;
}

/*******************************/
/*时间段*/
.seat-buttons {
  display: flex;
  flex-wrap: wrap;
}

.time-slot-button {
  margin: 5px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
}

.selected-time-slot {
  background-color: #4caf50;
  color: white;
}

.time-slot-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 可根据需要自定义模态框的样式 */
</style>
